import React, { Component } from 'react';
//封装的一道题目   input框  在最下面

class MyInput extends Component<IProps, IState> {
  handleStrLength: (str: string, maxLength: number) => string;
  changeHandler: (e: any) => void;
  static defaultProps: { maxLength: number }; //声明静态属性
  constructor(props: IProps | Readonly<IProps>) {
    super(props);
    const { value, defaultValue, onChange, maxLength } = this.props;
    this.handleStrLength = (str: string, maxLength: number) => {
      return str.length > maxLength ? str.slice(0, maxLength) : str;
    };
    this.state = {
      value: this.handleStrLength(defaultValue || value || '', maxLength),
      maxLength,
    };
    this.changeHandler = (e) => {
      const value = e.target.value.trim();
      this.setState({
        value: this.handleStrLength(value, maxLength),
      });

      onChange && onChange(value); //调用传递过来的onchange事件
      console.log('1111', this.props, value);
    };
  }

  render() {
    const { value, maxLength } = this.state;
    return (
      <div style={{ position: 'relative' }}>
        <input
          type="text"
          // eslint-disable-next-line react/no-string-refs
          ref="ipt"
          value={value}
          onChange={this.changeHandler}
          style={{ width: '100%' }}
        />
        <div style={{ position: 'absolute', top: 0, right: 0 }}>
          {value.length} / {maxLength}
        </div>
      </div>
    );
  }
}
export default MyInput;
interface IProps {
  value: string;
  defaultValue: string;
  onChange: (value: string) => void;
  maxLength: number;
}
interface IState {
  value: string;
  maxLength: number;
}
// 3、使用React，实现如下组件，完成 React 组件封装，并且不失input原生组件能力, 不能使用原生maxLength
// 注意组件的 defaultValue 功能，以及 value 受控模式的展示
// | API          | 描述                     | 类型                   |
// | ------------ | ------------------------ | ---------------------- |
// | value        | 当前的 value 值          | string                 |
// | defaultValue | 初始化的 value 值        | string                 |
// | onChange     | 发生改变的时候触发的回调 | Function(value, event) |
// | maxLength    | 最大长度                 | Number                 |
// class MyInput extends React.Component {
//     // 你的代码
//     const { value,defaultValue,onChange,maxLength} = this.props
// render() {
//     // 你的代码
//     <input />
// }
// }

// // 组件支持输入以下 props
// MyInput.propTypes = {
//     maxLength: PropTypes.number.isRequired,
// }

// MyInput.defaultProps = {
//     maxLength: 10,
// }
